<template>
	<div class="input ant-input" contenteditable placeholder="请输入文字">
		<div contenteditable="false">
			<template v-for="(tag, index) in tags">
				<a-tag color="orange" :key="tag" :closable="true" @close="handleClose(index)">
					{{ tag }}
				</a-tag>
			</template>

			<a-input
				v-if="inputVisible"
				ref="input"
				type="text"
				size="small"
				width="40%"
				:value="inputValue"
				@change="handleInputChange"
				@blur="lostFocusConfirm"
				@keyup.enter="handleInputConfirm"
				@keyup.delete="handleInputDelete"
				style="margin-bottom: 3px; margin-top: 3px"
				placeholder="Enter确认"
			/>
			<!-- <a-tag v-else @click="showInput" style="background: #fff; borderstyle: dashed" disabled="true">
				<a-icon type="plus" />创建{{ tagAlias }}
			</a-tag> -->
			<a-tag v-if="tags.length == 0" @click="selectTags" style="borderstyle: dashed; margin-left: 8px" color="#87d068" disabled="true">
				<a-icon type="plus" />选择标签
			</a-tag>
		</div>
		<tags-belong ref="tagsBelong" @ok="selectTagsOk" />
	</div>
</template>
<script>
import tagsBelong from './tagsBelong.vue'
export default {
	props: {
		tagAlias: {
			type: String,
			required: false,
			default: '标签',
		},
	},
	components: {
		tagsBelong,
	},
	data() {
		return {
			tags: [],
			readonly: false,
			inputVisible: false,
			inputValue: '',
			click: 0,
		}
	},
	watch: {
		tags(newValue, oldValue) {
			// console.log(newValue)
			// console.log(oldValue)
			this.$emit('change', newValue)
		},
		inputVisible(newValue, oldValue) {
			if (!newValue) {
				this.click = 0
			}
		},
	},
	created() {},
	methods: {
		handleClose(index) {
			// console.log(index)
			// const tags = this.tags.filter((tag) => tag !== removedTag)
			// this.tags = tags
			// console.log(tags)
			// this.tags = this.tags.splice(this.tags[index], this.tags[index]+1)
			const tags = []
			this.tags.map((tag, cindex) => {
				if (index !== cindex) {
					tags.push(tag)
				}
			})
			this.tags = tags
		},
		showInput() {
			this.inputVisible = true
			this.$nextTick(function () {
				this.$refs.input.focus()
			})
		},
		handleInputChange(e) {
			this.inputValue = e.target.value
		},
		handleInputConfirm() {
			const inputValue = this.inputValue
			let tags = this.tags
			if (inputValue && tags.indexOf(inputValue) === -1) {
				tags = [...tags, inputValue]
			}
			Object.assign(this, {
				tags,
				inputVisible: false,
				inputValue: '',
			})
			this.showInput()
		},
		handleInputDelete(e) {
			const value = e.target.value
			if (!value) {
				this.click = this.click + 1
				if (this.click > 1) {
					this.inputVisible = false
				}
			}
			e.preventDefault()
		},
		lostFocusConfirm(e) {
			e.target.value = ''
			this.$refs.input.blur()
			this.inputVisible = false
		},
		getTagArr() {
			return this.tags
		},
		getTagStr() {
			let str = ''
			if (this.tags.length > 0) {
				this.tags.forEach(function (item, index) {
					str = str + item + ','
				})
				str = str.substring(0, str.length - 1)
			}
			return str
		},
		setTags(tags) {
			if (tags && typeof tags === 'string') {
				this.tags = tags.split(',')
			}
		},
		setTagArr(tagArr) {
			if (tagArr && tagArr.length > 0) {
				this.tags = tagArr
			}
		},
		clearTags() {
			this.tags = []
		},
		selectTags() {
			this.$refs.tagsBelong.open()
		},
		selectTagsOk(tags) {
			// console.log(tags, 'tags')
			const that = this
			const tagArrs = this.tags
			if (tagArrs.length === 0) {
				this.setTagArr(tags)
			} else {
				if (tags && tags.length > 0) {
					tags.forEach(function (item, index) {
						// console.log(tags.indexOf(item))
						if (that.tags.indexOf(item) < 0) {
							that.tags.push(item)
						}
					})
				}
			}
		},
	},
}
</script>

<style type="text/css">
/**css样式*/
.input {
	width: 100%;
	height: 100%;
	line-height: 24px;
	font-size: 14px;
	padding: 5px 8px;
	border: 1px solid #ddd;
}

.input:empty::before {
	content: attr(placeholder);
}
</style>
